<template>
  <div class="adderss-box">
    <img src="http://img.zuimeng.net.cn/pay/images/zhifushibai@2x.png" alt="" />
    <div v-if="lang == 'zh'">
      <h2 v-if="type == 6">您已申请关闭交易！</h2>
      <h2 v-if="type == 7">抱歉，支付失败！</h2>

      <p v-if="type == 6">平台将联系对方，并删除该订单</p>

      <div v-if="type == 7" class="btn1" @click="back">更换其他支付方式</div>
      <div v-if="type == 7" class="btn" @click="goOther">
        放弃支付，返回订单
      </div>

      <div v-if="type == 6 || type == 8" class="btn goIndex" @click="goIndex">
        返回首页
      </div>
      <p v-if="type == 6 || type == 8" class="goOther" @click="goOther">
        继续查看订单
      </p>
    </div>
    <div v-else>
      <h2 v-if="type == 6">You have applied for closing the transaction.</h2>
      <h2 v-if="type == 7">Sorry, payment failed</h2>

      <p v-if="type == 6">
        The platform will contact the seller and delete the order
      </p>

      <div v-if="type == 7" class="btn1" @click="back">
        Change other payment methods
      </div>
      <div v-if="type == 7" class="btn" @click="goOther">
        Give up payment, return order
      </div>

      <div v-if="type == 6 || type == 8" class="btn goIndex" @click="goIndex">
        Back to home
      </div>
      <p v-if="type == 6 || type == 8" class="goOther" @click="goOther">
        Continue to view orders
      </p>
    </div>
  </div>
</template>
<script>
import { postBond, getGoodsDetails } from "@/api/goods";
import { Loading, Toast, Cell, CellGroup, RadioGroup, Radio } from "vant";

export default {
  name: "myorderFail",
  data() {
    return {
      userId: 0, //用户id
      type: 6, //支付失败：6申请关闭交易  7支付失败
      lang: "zh",
      status: 0, //订单列表状态  status=0查看更多返回的页面是置换；&status=1返回购买页面
    };
  },
  //实例创建完成后被立即调用
  created() {
    //获得语言类型lang
    if (this.$route.query.lang) {
      this.lang = this.$route.query.lang;
    }
    //获取用户id
    if (this.$route.query.userId && this.$route.query.userId > 0) {
      this.userId = this.$route.query.userId;
      //把用户id存储在缓存
      window.localStorage.setItem("userId", this.userId);
    } else {
      this.userId = window.localStorage.getItem("userId");
    }
    //获得类型
    if (this.$route.query.type && this.$route.query.type > 0) {
      this.type = this.$route.query.type;
    }
    //获得状态
    if (this.$route.query.status && this.$route.query.status > 0) {
      this.status = this.$route.query.status;
    }
  },
  //
  methods: {
    //返回上一页
    back() {
      let para = {};
      para.isRefresh = false;
      this.interaction.hReturn(para);
    },
    //返回首页
    goIndex() {
      let para = {};
      para.linkType = "index";
      this.interaction.hLinkToApp(para);
    },
    //继续查看订单 跳转订单列表
    goOther() {
      let para = {};
      var title = "";

      para.lang = this.lang; //显示网页语言类型 zh中文 en英文
      para.userId = this.userId;
      //先判断类型
      if (this.status == 1) {
        //我的购买
        para.url = "/myBuy?lang=" + this.lang + "&userId=" + this.userId;
        if (this.lang == "zh") title = "我的购买";
        else title = "My Goods";
      } else {
        //我的置换
        if (this.lang == "zh") title = "我的置换";
        else title = "My Replacement";
        para.url = "/myChange?lang=" + this.lang + "&userId=" + this.userId;
      }
      para.title = title;
      para.back = "my";
      this.interaction.hLink(para);
    },
  },
};
</script>

<style lang="stylus" scoped>
.adderss-box{
    width :100%;
    height:100%;
    background :#fff;
    text-align:center;
    position:fixed;
    bottom :0;
    img{
        width:1.466667rem;
        height:1.466667rem;
        margin :0 auto;
        margin-top :1.066667rem;
    }
    h2{
        font-family:PingFangSC-Regular;
        font-size:.48rem;
        color:#494949;
        letter-spacing:.006667rem;
        text-align:center;
        margin-top :.266667rem;
        margin-bottom :1.333333rem;
    }
    p{
       font-family:PingFangSC-Regular;
        font-size:.373333rem;
        color:#494949;
        letter-spacing:.005067rem;
        text-align:center;
        line-height:.693333rem;
    }
    p.goOther{
        font-family:PingFangSC-Regular;
        font-size:.373333rem;
        color:#cb9c57;
        letter-spacing:.005067rem;
        margin-top :.533333rem;
    }
    .btn{
        border:2px solid #cb9c57;
        border-radius:100px;
        width:6.426667rem;
        height:.96rem;
        line-height :.96rem;
        font-family:PingFangSC-Medium;
        font-size:.373333rem;
        color:#cb9c57;
        letter-spacing:.005067rem;
        text-align:center;
        margin :0 auto;
        margin-top :.533333rem;

    }
    .btn.goIndex{
        margin-top:1.6rem;
    }
     .btn1{
        border:2px solid #cb9c57;
        border-radius:100px;
        width:6.426667rem;
        height:.96rem;
        line-height :.96rem;
        font-family:PingFangSC-Medium;
        font-size:.373333rem;
        color:#cb9c57;
        letter-spacing:.005067rem;
        text-align:center;
        margin :0 auto;
        margin-top :2rem;
        background:#cb9c57;
        color:#ffffff;
    }
}
</style>
